<template>
  <!-- 关键词 -->
  <div class="keyword">
    <div class="keyword_top">
      <el-input v-model="listQuery.keyword" placeholder="请输入关键字" clearable />
      <el-input v-model="listQuery.url" placeholder="请输入跳转链接" clearable />
      <el-button type="primary" icon="el-icon-search" @click="getKeywordList">查找</el-button>
      <el-button type="primary" icon="el-icon-edit" @click="dialogAddVisible = true">添加</el-button>
      <el-button type="primary" icon="el-icon-download" @click="exportBrandList">导出</el-button>
    </div>
    <div class="keyword_bottom">
      <el-table :data="list" style="width: 100%" border v-loading="listLoading">
        <el-table-column label="关键词ID" prop="id" sortable>
          <template slot-scope="scope">
            {{ scope.row.id }}
          </template>
        </el-table-column>
        <el-table-column label="关键词" prop="keyword">
          <template slot-scope="scope">
            {{ scope.row.keyword }}
          </template>
        </el-table-column>
        <el-table-column label="跳转链接" prop="url">
          <template slot-scope="scope">
            {{ scope.row.url }}
          </template>
        </el-table-column>
        <el-table-column label="是否推荐" prop="isHot">
          <template slot-scope="scope">
            <el-tag size="medium" v-if="scope.row.isHot == true" type="success">是</el-tag>
            <el-tag size="medium" v-else>否</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否默认" prop="isDefault">
          <template slot-scope="scope">
            <el-tag size="medium" v-if="scope.row.isHot == true" type="success">是</el-tag>
            <el-tag size="medium" v-else>否</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)" type="primary">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
        @pagination="getKeywordList" />
    </div>
    <el-dialog title="创建" :visible.sync="dialogAddVisible">
      <el-form ref="ruleForm" :model="dialogAddForm" :rules="rules">
        <el-form-item label="关键字" prop="keyword">
          <el-input v-model="dialogAddForm.keyword" />
        </el-form-item>
        <el-form-item label="跳转链接" prop="url">
          <el-input v-model="dialogAddForm.url" />
        </el-form-item>
        <el-form-item label="是否推荐" prop="isHot">
          <el-select v-model="dialogAddForm.isHot" placeholder="请选择">
            <el-option label="推荐" value="true"></el-option>
            <el-option label="普通" value="false"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否默认" prop="isDefault">
          <el-select v-model="dialogAddForm.isDefault" placeholder="请选择">
            <el-option label="默认" value="true"></el-option>
            <el-option label="非默认" value="false"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddVisible = false">取消</el-button>
        <el-button type="primary" @click="trueAddKeyword('ruleForm')">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑" :visible.sync="dialogEditVisible">
      <el-form ref="ruleForm" :model="dialogEditForm" :rules="rules">
        <el-form-item label="关键字" prop="keyword">
          <el-input v-model="dialogEditForm.keyword" />
        </el-form-item>
        <el-form-item label="跳转链接" prop="url">
          <el-input v-model="dialogEditForm.url" />
        </el-form-item>
        <el-form-item label="是否推荐" prop="isHot">
          <el-select v-model="dialogEditForm.isHot" placeholder="请选择">
            <el-option label="推荐" :value="true"></el-option>
            <el-option label="普通" :value="false"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否默认" prop="isDefault">
          <el-select v-model="dialogEditForm.isDefault" placeholder="请选择">
            <el-option label="默认" :value="true"></el-option>
            <el-option label="非默认" :value="false"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditVisible = false">取消</el-button>
        <el-button type="primary" @click="trueEditKeyword('ruleForm')">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { listKeyword, deleteKeyword, createKeyword,updateKeyword } from '@/api/keyword'
import Pagination from '@/components/Pagination'
import { downloadXlsx } from '@/utils/xlsx';

export default {
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 20,
        aftersaleSn: undefined,
        orderId: undefined,
        status: '',
        sort: 'add_time',
        order: 'desc',
        keyword: '',
        url: '',
      },
      total: 0,
      list: [],
      dialogAddVisible: false,
      dialogEditVisible: false,
      dialogAddForm: {
        keyword: '',
        url: '',
        isHot: '',
        isDefault: '',
      },
      dialogEditForm: {
        keyword: '',
        url: '',
        isHot: '',
        isDefault: '',
      },
      rules: {
        keyword: [
          { required: true, message: '关键词不能为空', trigger: 'blur' }
        ]
      },
      listLoading: true,
    }
  },
  methods: {
    getKeywordList() {
      listKeyword(this.listQuery)
        .then(res => {
          this.list = res.data.data.list
          console.log(res, 'res');
          this.total = res.data.data.total
          this.listLoading = false
        }).catch(err => {
          console.log(err)
        })
    },
    exportBrandList() {
      let dataList = []
      this.list.forEach((item, index) => {
        let arr = [];
        arr[0] = item.id;
        arr[1] = item.keyword;
        arr[2] = item.url;
        arr[3] = item.isHot;
        arr[4] = item.isDefault;
        dataList.push(arr)
      })
      dataList.unshift(['关键词ID', '关键词', '跳转链接', '是否推荐', '是否默认'])

      downloadXlsx(dataList, '关键词设置.xlsx')
    },
    handleDelete(row) {
      deleteKeyword(row)
        .then(res => {
          this.$notify.success({
            title: '成功',
            message: '删除成功'
          })
          this.getKeywordList()
        }).catch(err => {
          console.log(err)
        })
    },
    // 新增
    trueAddKeyword() {
      createKeyword(this.dialogAddForm)
        .then(res => {
          this.$notify.success({
            title: '成功',
            message: '创建成功'
          })
          this.dialogAddVisible = false;
          this.getKeywordList();
          this.dialogAddForm = {}
        }).catch(err => {
          console.log(err)
        })
    },
    // 编辑
    handleEdit(row) {
      this.dialogEditForm = row;
      this.dialogEditVisible = true
    },
    trueEditKeyword() {
      updateKeyword(this.dialogEditForm)
        .then(res => {
          this.$notify.success({
            title: '成功',
            message: '编辑成功'
          })
          this.dialogEditVisible = false;
          this.getKeywordList();
          this.dialogEditForm = {}
        }).catch(err => {
          console.log(err)
        })
    }
  },
  mounted() {
    this.getKeywordList()
  },
  components: {
    Pagination
  }
}
</script>
<style lang="scss" scoped>
.keyword {
  padding: 20px;

  .keyword_top {
    display: flex;
    margin-bottom: 20px;

    ::v-deep .el-input--mini {
      width: 200px !important;

      .el-input__inner {
        width: 100%;
      }
    }
  }

  .keyword_bottom {
    width: 100%;

    .el-table {
      ::v-deep .cell {
        text-align: center;
      }
    }
  }

  .el-dialog {
    .el-dialog__body {
      padding: 30px 20px;

      .el-form {
        margin-left: 50px;

        .el-form-item {
          display: flex;

          ::v-deep .el-form-item__label {
            width: 80px !important;
            margin-right: 50px;
          }

          ::v-deep .el-input {
            width: 300px !important;

            .el-input__inner {
              width: 100%;
            }
          }

          ::v-deep .el-select {
            .el-input {
              width: 180px !important;

              .el-input__inner {
                width: 180px !important;
              }
            }
          }

          .el-textarea {
            width: 300px !important;
          }

          .avatar-uploader {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
          }

          .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
          }

          .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
          }

          .avatar {
            width: 178px;
            height: 178px;
            display: block;
          }
        }
      }
    }

  }
}
</style>